<template>
  <div class="activity-list-container">
    <!-- 搜索区域 -->
    <div class="search-card">
      <el-input
          v-model="data.title"
          placeholder="搜索活动标题"
          class="search-input"
          :prefix-icon="Search"
      />
      <el-select v-model="data.activityType" placeholder="活动类型" clearable>
        <el-option label="党课" :value="1" />
        <el-option label="团课" :value="2" />
        <el-option label="主题党日" :value="3" />
        <el-option label="志愿服务" :value="4" />
        <el-option label="其他" :value="5" />
      </el-select>
      <el-select v-model="data.orgType" placeholder="组织类型" clearable>
        <el-option label="党组织" :value="1" />
        <el-option label="团组织" :value="2" />
      </el-select>
      <el-button type="danger" plain @click="load">查询</el-button>
      <el-button type="danger" plain @click="reset">重置</el-button>
    </div>

    <!-- 活动卡片列表 -->
    <div class="activity-grid">
      <el-card v-for="item in data.activities" :key="item.id" class="activity-card">
        <div class="activity-header">
          <h3 class="activity-title">{{ item.title }}</h3>
          <div class="activity-tags">
            <el-tag :type="getOrgTypeTag(item.orgType)">
              {{ getOrgTypeLabel(item.orgType) }}
            </el-tag>
            <el-tag :type="getActivityTypeTag(item.activityType)">
              {{ getActivityTypeLabel(item.activityType) }}
            </el-tag>
          </div>
        </div>

        <div class="activity-info">
          <p><i class="el-icon-location"></i> 地点：{{ item.location }}</p>
          <p><i class="el-icon-time"></i> 时间：{{ item.startTime?.substring(0, 16) }}</p>
          <p><i class="el-icon-user"></i> 人数：{{ item.currentParticipants }}/{{ item.maxParticipants }}</p>
          <p><i class="el-icon-date"></i> 报名截止：{{ item.signupDeadline?.substring(0, 16) }}</p>
        </div>

        <div class="activity-footer">
          <el-button type="danger" plain @click="showDetails(item)">查看详情</el-button>
        </div>
      </el-card>
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[6,9, 18, 27, 36]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
      />
    </div>

    <!-- 活动详情对话框 -->
    <el-dialog
        v-model="data.detailVisible"
        :title="data.currentActivity?.title"
        width="600px"
    >
      <div class="activity-detail">
        <div class="detail-header">
          <el-tag :type="getOrgTypeTag(data.currentActivity?.orgType)">
            {{ getOrgTypeLabel(data.currentActivity?.orgType) }}
          </el-tag>
          <el-tag :type="getActivityTypeTag(data.currentActivity?.activityType)">
            {{ getActivityTypeLabel(data.currentActivity?.activityType) }}
          </el-tag>
        </div>

        <div class="detail-info">
          <p><strong>活动地点：</strong>{{ data.currentActivity?.location }}</p>
          <p><strong>开始时间：</strong>{{ data.currentActivity?.startTime }}</p>
          <p><strong>结束时间：</strong>{{ data.currentActivity?.endTime }}</p>
          <p><strong>报名截止：</strong>{{ data.currentActivity?.signupDeadline }}</p>
          <p><strong>参与人数：</strong>{{ data.currentActivity?.currentParticipants }}/{{ data.currentActivity?.maxParticipants }}</p>
          <div class="detail-content">
            <strong>活动内容：</strong>
            <p>{{ data.currentActivity?.content }}</p>
          </div>
        </div>

        <div class="detail-footer">
          <el-button
              type="danger"
              :disabled="isSignupDisabled(data.currentActivity)"
              @click="handleSignup(data.currentActivity)"
          >
            {{ getSignupButtonText(data.currentActivity) }}
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { Search } from '@element-plus/icons-vue'
import request from '@/utils/request'
import {ElMessage, ElMessageBox} from 'element-plus'
import {getUserInfo} from "@/utils/auth";

const data = reactive({
  title: '',
  activityType: '',
  orgType: '',
  activities: [],
  pageNum: 1,
  pageSize: 9,
  total: 0,
  detailVisible: false,
  currentActivity: null,
  user: getUserInfo() || {}
})

// 获取活动列表
const load = () => {
  request.get('/organizationActivity/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      title: data.title,
      activityType: data.activityType,
      orgType: data.orgType,
      status: 1  // 只查询未开始的活动
    }
  }).then(res => {
    if (res.code === '200') {
      data.activities = res.data.list
      data.total = res.data.total
    }
  })
}

// 显示活动详情
const showDetails = (activity) => {
  data.currentActivity = activity
  data.detailVisible = true
}


// 处理报名
const handleSignup = (activity) => {
  // 检查用户是否登录
  if (!data.user) {
    ElMessage.warning('请先登录后再报名')
    return
  }

  ElMessageBox.confirm(
      `确定要报名参加"${activity.title}"活动吗？`,
      '报名确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
  ).then(() => {
    request.post('/activitySignup/signup', {
      activityId: activity.id,
      userId: data.user.id
    }).then(res => {
      if (res.code === '200') {
        ElMessage.success('报名成功！')
        data.detailVisible = false
        load()
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}

// 修改判断是否可以报名的方法
const isSignupDisabled = (activity) => {
  if (!activity || !data.user) return true  // 添加用户未登录的判断
  const now = new Date()
  const deadline = new Date(activity.signupDeadline)
  return now > deadline ||
      activity.currentParticipants >= activity.maxParticipants
}

// 修改获取报名按钮文本的方法
const getSignupButtonText = (activity) => {
  if (!data.user) return '请先登录'  // 添加用户未登录的提示
  if (!activity) return '报名参加'
  if (activity.currentParticipants >= activity.maxParticipants) {
    return '人数已满'
  }
  const now = new Date()
  const deadline = new Date(activity.signupDeadline)
  if (now > deadline) {
    return '报名已截止'
  }
  return '报名参加'
}

// 获取活动类型标签文本
const getActivityTypeLabel = (type) => {
  const types = {
    1: '党课',
    2: '团课',
    3: '主题党日',
    4: '志愿服务',
    5: '其他'
  }
  return types[type] || '未知'
}

// 获取活动类型标签样式
const getActivityTypeTag = (type) => {
  const tags = {
    1: 'danger',
    2: 'warning',
    3: 'success',
    4: 'info',
    5: ''
  }
  return tags[type] || ''
}

// 获取组织类型标签文本
const getOrgTypeLabel = (type) => {
  const types = {
    1: '党组织',
    2: '团组织'
  }
  return types[type] || '未知'
}

// 获取组织类型标签样式
const getOrgTypeTag = (type) => {
  const tags = {
    1: 'danger',
    2: 'warning'
  }
  return tags[type] || ''
}

// 重置搜索条件
const reset = () => {
  data.title = ''
  data.activityType = ''
  data.orgType = ''
  load()
}

// 分页大小改变
const handleSizeChange = (val) => {
  data.pageSize = val
  load()
}

// 当前页改变
const handleCurrentChange = (val) => {
  data.pageNum = val
  load()
}

// 检查活动状态
const getActivityStatus = (activity) => {
  const now = new Date()
  const startTime = new Date(activity.startTime)
  const endTime = new Date(activity.endTime)

  if (now < startTime) {
    return '未开始'
  } else if (now > endTime) {
    return '已结束'
  } else {
    return '进行中'
  }
}

// 获取活动状态标签样式
const getStatusTagType = (status) => {
  const types = {
    '未开始': 'warning',
    '进行中': 'success',
    '已结束': 'info'
  }
  return types[status] || ''
}

// 格式化日期时间
const formatDateTime = (dateStr) => {
  if (!dateStr) return ''
  return dateStr.substring(0, 16).replace('T', ' ')
}

// 初始加载
load()
</script>


<style scoped>
.activity-list-container {
  padding: 20px;
}

.search-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
}

.search-input {
  width: 300px;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.activity-card {
  transition: transform 0.3s;
}

.activity-card:hover {
  transform: translateY(-5px);
}

.activity-header {
  margin-bottom: 15px;
}

.activity-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.activity-tags {
  display: flex;
  gap: 8px;
}

.activity-info {
  margin: 15px 0;
}

.activity-info p {
  margin: 8px 0;
  color: #666;
}

.activity-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}

.activity-detail {
  padding: 20px;
}

.detail-header {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.detail-info p {
  margin: 10px 0;
  line-height: 1.5;
}

.detail-content {
  margin-top: 20px;
  padding: 15px;
  background: #f8f8f8;
  border-radius: 4px;
}

.detail-footer {
  margin-top: 20px;
  text-align: center;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

/* Element Plus 主题定制 */
:deep(.el-card) {
  border-radius: 8px;
}

:deep(.el-button--danger) {
  --el-button-bg-color: #c8161d;
  --el-button-border-color: #c8161d;
  --el-button-hover-bg-color: #e54b4b;
  --el-button-hover-border-color: #e54b4b;
}

:deep(.el-button--danger.is-plain) {
  --el-button-bg-color: #fff;
  --el-button-border-color: #c8161d;
  --el-button-text-color: #c8161d;
  --el-button-hover-text-color: #fff;
  --el-button-hover-bg-color: #c8161d;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #c8161d;
}
</style>
